<template>
	<view>
		<view class="content">
			<view class="information">
				<view>
					<view>发起人信息</view>
					<view>^</view>
				</view>
				<view>
					<view>流水号</view>
					<view>LS{{num}}</view>
				</view>
				<view>
					<view>姓名</view>
					<view>{{name}}</view>
				</view>
				<view>
					<view>部门</view>
					<view>{{department}}</view>
				</view>
				<view>
					<view>岗位</view>
					<view>{{position}}</view>
				</view>
				<view>
					<view>发起时间</view>
					<view :value="valueTime">{{valueTime}}</view>
				</view>
			</view>
			
			<view class="details">
				<view>
					<view>请假信息</view>
					<view>^</view>
				</view>
				<view>
					<text>*</text>
					<view>请假类型</view>
					<picker :range="arrType" 
					:value="index" @change="leaveType">
						<label>{{arrType[index]}}</label>
					</picker>
				</view>
				<view>
					<text>*</text>
					<view>开始时间</view>
					<picker mode="date" :value="start" @change="startDate">
						{{start}}
					</picker>
				</view>
				<view>
					<text>*</text>
					<view>结束时间</view>
					<picker mode="date" :value="end" @change="endDate">
						{{end}}
					</picker>
				</view>
				<view>
					<view>请假事由</view>
					<input type="text" v-model="reason" placeholder="请填写"/>
				</view>
			</view>
		</view>
		
		<view class="footer">
			<button @click="submit">提交</button>
			<button plain=true @click="back">返回</button>
		</view>
	</view>
</template>

<script>
	import clock from '../../utils/apply_leave.js'
	import http from '../../utils/http.js'
	import {useStore} from 'vuex'
	import {reactive,toRefs,onMounted} from 'vue'
	
	export default {
		setup() {
			const store=useStore();
			let data=reactive({
				// num:clock().match(/\d+/g).toString().replace(/,/g,''),
				num:'',
				arrType:['请选择'],
				name:store.state.liujinchang.user.name,
				department:store.state.liujinchang.user.department_name,
				position:store.state.liujinchang.user.post_name,
				valueTime:'',
				index:0,
				start:'请选择开始日期',
				end:'请选择结束日期',
				reason:'',
				leaveType(e){
					data.index=e.detail.value
				},
				startDate(e){
					data.start = e.detail.value
				},
				endDate(e){
					data.end = e.detail.value
				},
				submit(){
					// console.log(data.arrType[data.index])
					http({
						url:'/System/application/add',
						method:'post',
						data:{
							num:data.num,
							name:data.name,
							type:data.index,
							state:'未审核',
							audit:store.state.liujinchang.user.work_id,
							starttime:data.start,
							content:data.reason,
							endtime:data.end,
							applytime:data.valueTime
						}
					}).then((res)=>{
						console.log(res)
						uni.showModal({
							title:'提示',
							content:'申请成功,是否返回上一页',
							success:function(res){
								if(res.confirm){
									uni.navigateBack()
								}
							}
						})
					})
				},
				back(){
					uni.switchTab({
						url:'/pages/use/use'
					})
				},
				setnum:()=>{
					http({
						url:'/personalcenter/salary/addget',
					}).then((res)=>{
						data.num=res.data.data
					})
				},
				autoTime:()=>{
					setInterval(()=>{
						data.valueTime=clock();
					},1000)
				},
				getType(){
					http({
						url:'/System/application_type/get'
					}).then((res)=>{
						const n=res.data.data
							data.arrType.push(n[0].type,n[1].type,n[2].type,n[6].type);
							// console.log(data.arrType)
					})
				}
			})
			onMounted(()=>{
				data.autoTime();
				data.getType();
				data.setnum()
			})
			
			return {
				...toRefs(data)
			}
		}
		
	}
</script>

<style scoped lang="scss">
 .content {
	 background-color: #F2F2F2;
	 padding: 30rpx;
	 
	 .details {
		 margin-top: 30rpx;
		 
		 text {
			 color: red;
		 }
		 view:last-child,
		 view:nth-of-type(5){
			 margin-left: 45rpx;
		 }
	 }
 }
 .information>view,.details>view {
	 margin: 0 30rpx;
	 padding: 20rpx 0;
 }
 .information>view:not(:first-child) {
	 display: flex;
	 view {
		 flex: 1;
	 }
 }
 .information>view:not(:last-child),
 .details>view:not(:last-child){
	 border-bottom: 1px solid #F6F6F6;
 }
 .information>view:not(:first-child)>view:first-child,
 .details>view:not(:first-child)>view {
 	 color: #566068;
 }
 .information>view:not(:first-child)>view:last-child,
 .details>view:not(:first-child)>input{
	 color: #999999;
 }
 .information>view:first-child,
 .details>view:first-child {
	 display: flex;
	 justify-content: space-between;
 }
 .content>view {
	 background-color: #fff;
	 border-radius: 20rpx;
 }
 .details>view:not(:first-child) {
	 display: flex;
	 
	 view {
		 flex: 1;
	 }
	 picker {
		 margin-left: 90rpx;
		 flex: 2;
		 color: #999999;
	 }
 }
 .footer {
	 background-color: #fff;
	 display: flex;
	 justify-content: space-around;
	 padding: 20rpx 0;
	 
	 button {
		 width: 320rpx;
		 height: 80rpx;
		 line-height: 80rpx;
		 text-align: center;
		 font-weight: 300;
		 color: #fff;
		 background-color: #2D8CF0;
	 }
 }
</style>
